<template>
    <div class="usertableManger">
        <div class="userSheach">
            <div class="item">
                <span>审批状态:</span>
                <n-select class="selectItem" v-model:value="parmas.applyState" :options="optionSelect"
                    placeholder="请选择状态" />
            </div>
            <div class="itemBtn">
                <n-button attr-type="button" type="info" @click="queryBtn">查询</n-button>
                <n-button attr-type="button" @click="resetVaalue">重置</n-button>
            </div>
        </div>
        <div class="usertable">
            <n-data-table :columns="columns" :data="tableData" :max-height="250" :row-key="row => row._id" />
            <div class="userPagination">
                <span></span>
                <n-pagination :item-count="pagination.total" :on-update:page="updatePage"
                    :on-update:page-size="updateSize" :page-sizes="[2, 5, 15, 40]" show-size-picker />
            </div>
        </div>
        <showmadolVue ref="showMadol" @getMessage='getMessage' />
    </div>
</template>
<script lang="ts">

import { useMessage } from 'naive-ui'
import { defineComponent, ref, reactive, toRefs, watchEffect, h, onBeforeMount } from 'vue'
import { NButton } from 'naive-ui'
import { useStore } from 'vuex'
import { leaveList, leaves0perate,leavesCount } from '../../../api/leaves'
import showmadolVue from './commpoent/showmadol.vue'
const message = useMessage()
export default defineComponent({
    components: {
        showmadolVue
    },
    setup() {
        const store = useStore()
        const userInfo = store.state.userInfo
        const columns = [
            // {
            //     type: 'selection',
            //     // disabled(row, index) {
            //     //     return row.name === 'Edward King 3'
            //     // }
            // },
            {
                title: '单号',
                key: 'orderNo'
            },
            {
                title: '休假时间',
                key: 'DateProcess'
            },
            {
                title: '休假时长',
                key: 'leaveTime',

            },
            {
                title: '休假类型',
                key: 'applyType',
                render: (row) => (
                    row.applyType == 1 ? '事假' : row.applyType == 2 ? '调休' : row.applyType == 3 ? '年假' : '年假'
                )
            },
            {
                title: '休假原因',
                key: 'reasons'
            },
            {
                title: '申请时间',
                key: 'createTime',
                // render: (row) =>(
                //   row.createTime.split('T')[0]
                // )
            },
            {
                title: '审批人',
                key: 'auditUsers',
            },
            {
                title: '当前审批人',
                key: 'curAuditUserName'
            },
            {
                title: '审批状态',
                key: 'applyState',
                render: (row) => (
                    row.applyState == 1 ? '待审批' : row.applyState == 2 ? '审批中' : row.applyState == 3 ? '审批拒绝' : row.applyState == 4 ? '审批通过' : row.applyState == 5 ? '作废' : '其他'

                )
            },
            {
                title: '操作',
                key: 'actions',
                width: "150px",
                render(row) {
                    if (row.curAuditUserName == userInfo.usename && [1, 2].includes(row.applyState)) {
                        return h(
                            'div',
                            {},
                            [
                                h(
                                    NButton,
                                    {
                                        size: 'small',
                                        type: "info",
                                        onClick: () => methods.showLeaveApprove(row)
                                    },
                                    {
                                        default: () => '审核'
                                    }
                                ),

                            ]
                        )
                    }

                }
            }
        ]

        const parameter = reactive({
            parmas: {
                pageNum: 1,
                pageSize: 10,
                applyState: null,
                type: 'approve'
            },
            pagination: {
                total: 10,
            },
            tableData: [],
            optionSelect: [
                {
                    label: '全部',
                    value: ""
                }, {
                    label: '待审批',
                    value: 1
                },
                {
                    label: '审批中',
                    value: 2
                },
                {
                    label: '审批拒绝',
                    value: 3
                },
                {
                    label: '审批通过',
                    value: 4
                },
                {
                    label: '作废',
                    value: 5
                },
            ],
        })

        onBeforeMount(() => {
            methods.pageList(parameter.parmas)
        })
        const showMadol = ref(null)
        const methods = reactive({
            //初始化
            pageList: (item) => {
                leaveList(item).then(res => {
                    parameter.pagination.total = res.page.total
                    parameter.tableData = res.data
                })
            },

            //分页
            updatePage(e) {
                parameter.parmas.pageNum = e
                methods.pageList(parameter.parmas)
            },
            updateSize(e) {
                console.log(e)
                parameter.parmas.pageSize = e
                methods.pageList(parameter.parmas)
            },

            getLeaveList() {
                methods.pageList(parameter.parmas)
            },
            // 查看
            showLeaveApprove(item) {
                showMadol.value.showModalfun(item)
            },
            //  删除
            userOneDelete(item) {
                leaves0perate({ _id: item._id, action: 'del' }).then(res => {
                    methods.pageList(parameter.parmas)
                    message.success('操作成功')
                })
            },
            //查询
            queryBtn() {
                methods.pageList(parameter.parmas)
            },
            // 重置
            resetVaalue() {
                parameter.parmas.applyState = null
            },
            getMessage() {
                methods.pageList(parameter.parmas)
                leavesCount().then(res => {
                    // myMeassge.value=res
                    store.dispatch('setCount', res)
                })
            }
        })

        return {
            columns,
            showMadol,
            ...toRefs(methods),
            ...toRefs(parameter),
        }
    }



})
</script>

<style lang="scss">
.usertableManger {
    height: 100%;
    padding: 10px;
    // background: rgb(224, 220, 220);

    .usertable {
        height: 100%;
        padding: 10px;
        background: #fff;

        .usertableAllBtn {
            padding: 5px;
            display: flex;

            .addBtn {
                margin-right: 10px;
            }
        }

        .delteBtn {
            margin: 0 5px;
        }

        .userPagination {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

    }

    .userSheach {
        background: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 17px;
        padding: 20px 0;

        .itemBtn {
            display: flex;

            .n-button {
                margin: auto 5px;
            }
        }

        .item {
            display: flex;
            align-items: center;
            margin: 0 10px;

            .selectItem {
                width: 150px;
            }

            span {
                white-space: nowrap;
                display: inline-block;
                padding-right: 12px;
            }
        }

    }
}
</style>